<script setup>
</script>
<template>
  <div>
<!--    Hello World!-->
    <div style="width: 100vw; height: 100vh;overflow: hidden;display: flex">
     <div style="flex: 1;background-color:black">
<!--       <el-image style="width: 100%;height: 100%" fit="cover" src="https://s2.loli.net/2024/07/12/tm5Mn2YPqISa74o.jpg" alt="1.jpg"/>-->
<!--       <el-image style="width: 100%;height: 100%" fit="cover" src="https://lyj-image-demo.oss-cn-beijing.aliyuncs.com/119098382_p0_master1200.jpg?Expires=1720758296&OSSAccessKeyId=TMP.3KePqQvtnH5pEehdU3NfCiRZgbjbKyDtZGJxepXqHWjx5ueoD17sJuJ2YDVSZx46sQnNzLYReiaTYtBEr7zfdRyadHwqMg&Signature=9tqqCUGteT6LICvPoOus1nC20I8%3D"/>-->
<!--      -->
       <el-image style="width: 100%;height: 100%" fit="cover" src="src/assets/image/1.jpg"/>
     </div>
     <div class="welcome-title">
        <div class="styled-title" style="font-size: 30px;">欢迎来到Clove的个人空间</div>
        <div style="margin-top: 10px;">在这里你可以学习</div>
        <div style="margin-top: 5px;">在这里你可以分享</div>
     </div>
      <div class="right-card">
        <router-view v-slot="{Component}">
          <transition name="el-fade-in-linear"  mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>
<style scoped>
.welcome-title {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: white;
  text-shadow: 0 0 10px black;
}
.right-card {
    width: 400px;
    z-index: 1;
    background-color: var(--el-bg-color);
}
.styled-title {
  font: 96px "微软雅黑"; /*设置字体和字体大小*/
  margin: 50px auto 15px auto; /*设置元素外边距*/
  font-weight: 500; /*设置字体粗细*/
  text-align: center; /*设置文字居中*/
  color: #ffffff;; /*设置文字颜色*/
  -webkit-animation: swing 2s infinite; /*设置动画*/
}
@-webkit-keyframes swing { /*创建动画*/
  20% {
    -webkit-transform: rotate(3deg);
  }
  40% {
    -webkit-transform: rotate(-3deg);
  }
  60% {
    -webkit-transform: rotate(3deg);
  }
  80% {
    -webkit-transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
</style>
